<template>
  <div class="page-dashboard">
    <div class="header">
      <div class="time-weather">
        <span class="time">
          {{ date }}
        </span>
        <span class="weather">
          晴 16~21℃ 偏北风
        </span>
      </div>
      <div class="title-wrap">
        <div class="title">
          天眼-数字化运营平台
        </div>
        <div class="sub-title">
          BIGUIYUANSHUZICHENGSHIZHIHUIZHONGXIN
        </div>
      </div>
      <div class="pull-down" @click="handleShowHeader">
        <i class="el-icon-d-arrow-left" />
      </div>
    </div>
    <div class="content">
      <el-row>
        <el-col :span="7">
          <citizen-block />

          <municipal-block />
        </el-col>
        <el-col ref="middle" :span="10" style="padding: 0 20px">
          <operation-city-block />

          <tenement-block />
        </el-col>
        <el-col :span="7">
          <ranking-block />

          <zoology-block />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { CitizenBlock, MunicipalBlock, TenementBlock, ZoologyBlock, RankingBlock, OperationCityBlock } from './components'
import moment from 'moment'

export default {
  name: 'Dashboard',
  components: { CitizenBlock, MunicipalBlock, TenementBlock, ZoologyBlock, RankingBlock, OperationCityBlock },
  data() {
    return {

      rankingStatus: 1,
      rankingOrder: 1,
      tenementStatus: 1
    }
  },
  computed: {
    date() {
      console.log(moment.locale('zh_cn'))
      return moment().format('lll')
    }
  },

  methods: {
    handleShowHeader() {
      this.$store.dispatch('settings/setLayoutHeader', true)
    }

  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
